<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <style>
        .box {
            display: flex;
            align-items: center;
        }

        #file {
            display: block;
        }

        .button {
            display: inline-block;
            padding: 8px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .button:hover {
            background-color: #3e8e41;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="file" id="file">
        <button class="button" onclick="upload()">上传</button>
    </div>

    <script>
        const url = 'http://localhost:8089/api/bigfile'; // 替换成上传接口地址
        const BYTES_PER_CHUNK = 1024 * 1024 * 10; // 每个分片的大小为1MB
        const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InJvb3QiLCJwYXNzd29yZCI6InJvb3QiLCJpYXQiOjE2Nzg1MDc4MTcsImV4cCI6MTY3ODUxMTQxN30.1RfFe5xU3v1fyQ741beOzmqEYL-hUAiuYMJ2au51f4Y'
        let start = 0;
        let filename = ''
        /**
         * 上传
         */
        function upload() {
            const file = document.getElementById('file').files[0];
            console.log('file ',file.name);
            filename = file.name
            const totalChunks = Math.ceil(file.size / BYTES_PER_CHUNK); // 总分片数
            let uploadedChunks = 0; // 已上传分片数
            let start_Chunck = 0 
            const uploaded = localStorage.getItem('UPLOAD-Chunks')
            if(uploaded){
                start_Chunck = Number(upload)
            }

            function uploadChunk(start) {
                const chunk = file.slice(start, start + BYTES_PER_CHUNK);
                const formData = new FormData();
                formData.append('bigfile', chunk, file.name + '-' + start);

                return fetch(url, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'Authorization': token // 替换成你自己的token
                    }
                }).then(response => {
                    if (response.ok) {
                        console.log('分片上传成功');
                        uploadedChunks++;
                        localStorage.setItem('UPLOAD-Chunks',uploadedChunks)

                        // 所有分片上传完成
                        if (uploadedChunks === totalChunks) {
                            console.log('所有分片上传完成');
                            // 合并分片，完成上传
                            mergeChunks();
                        } else {
                            // 继续上传下一个分片
                            uploadChunk(start + BYTES_PER_CHUNK);
                        }
                    } else {
                        console.error('分片上传失败');
                        uploadedChunks--
                        localStorage.setItem('UPLOAD-Chunks',uploadedChunks)
                        // 重新上传失败的分片
                        // uploadChunk(start);
                    }
                }).catch(error => {
                    console.error('分片上传失败', error);
                    uploadedChunks--
                    localStorage.setItem('UPLOAD-Chunks',uploadedChunks)
                    // 重新上传失败的分片
                    // uploadChunk(start);
                });
            }

            // 上传第一个分片
            uploadChunk(start_Chunck);
        }

        function mergeChunks() {
            console.log('开始合并分片');
            // 调用后端接口合并分片
            // ...
            fetch('http://localhost:8089/api/mergefile?filename='+filename,{
                method:'get',
                headers: {
                        'Authorization': token // 替换成你自己的token
                    }
            }).then(res=>{
                if (res.ok) {
                    console.log('res ',res);
                    console.log('合并分片完成');
                }
            })
            
        }
    </script>
</body>

</html>